<script setup lang='ts'>
import { computed, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import Header from '@/components/common/Header.vue';
import Footer from '@/components/common/Footer.vue';
import QRcode from 'qrcode.vue'


const route = useRoute()
const router = useRouter()

const templateID = route.params?.id
const templateData = ref({
    "_id": "61a739f38d5263ce811e7064",
    "id": 18,
    "uuid": "NwgoWh",
    "title": "前端架构师直播海报",
    "desc": "未命名作品",
    "author": "136****5632",
    "coverImg": "https://static.imooc-lego.com/upload-files/screenshot-889755.png",
    "isTemplate": true,
    "status": 2,
    "copiedCount": 1937,
    "latestPublishAt": "2020-11-24T10:18:59.000Z",
    "isHot": true,
    "isPublic": true,
    "createdAt": "2020-11-18T05:47:04.000Z",
    "updatedAt": "2023-04-21T12:30:55.758Z",
    "user": "617d33bed38dbc5025755a8b",
    "content": {
        "components": [
            {
                "name": "l-text",
                "props": {
                    "text": "如何突破前端成长瓶颈？",
                    "fontSize": "25px",
                    "fontFamily": "\"SimHei\",\"STHeiti\"",
                    "fontWeight": "bold",
                    "fontStyle": "normal",
                    "textDecoration": "none",
                    "lineHeight": "1",
                    "textAlign": "center",
                    "color": "#ffffff",
                    "backgroundColor": "",
                    "actionType": "",
                    "url": "",
                    "height": "32px",
                    "width": "278px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "54.5px",
                    "top": "79px",
                    "right": "0",
                    "tag": "h2"
                },
                "id": "6c81b087-5e03-4012-b4db-96a6a7b7788d",
                "layerName": "图层1"
            },
            {
                "name": "l-text",
                "props": {
                    "text": "三位大厂架构师，为你制定职业晋级方案",
                    "fontSize": "14px",
                    "fontFamily": "\"SimHei\",\"STHeiti\"",
                    "fontWeight": "normal",
                    "fontStyle": "normal",
                    "textDecoration": "none",
                    "lineHeight": "1",
                    "textAlign": "center",
                    "color": "#ffffff",
                    "backgroundColor": "",
                    "actionType": "",
                    "url": "",
                    "height": "26px",
                    "width": "261.5px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "57px",
                    "top": "143px",
                    "right": "0",
                    "tag": "p"
                },
                "id": "9749472f-9a24-41bd-8fde-74b9dc8eef50",
                "layerName": "图层2"
            },
            {
                "name": "l-text",
                "props": {
                    "text": "传道：前端架构设计原则和思路\n授业：全方位了解前端知识体系\n解惑：技术更新快，该如何应对\n目标：打破职业瓶颈，冲击大厂",
                    "fontSize": "13px",
                    "fontFamily": "",
                    "fontWeight": "normal",
                    "fontStyle": "normal",
                    "textDecoration": "none",
                    "lineHeight": "2",
                    "textAlign": "left",
                    "color": "#000000",
                    "backgroundColor": "",
                    "actionType": "",
                    "url": "",
                    "height": "127px",
                    "width": "210.5px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "47px",
                    "top": "265px",
                    "right": "0",
                    "tag": "p"
                },
                "id": "5e5e9f67-775c-4413-87fe-01d958c9edda",
                "layerName": "图层3"
            },
            {
                "name": "l-text",
                "props": {
                    "text": "直播内容",
                    "fontSize": "15px",
                    "fontFamily": "",
                    "fontWeight": "bold",
                    "fontStyle": "normal",
                    "textDecoration": "none",
                    "lineHeight": "1",
                    "textAlign": "center",
                    "color": "#ffffff",
                    "backgroundColor": "",
                    "actionType": "",
                    "url": "",
                    "height": "21px",
                    "width": "79.5px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "30.5px",
                    "top": "208px",
                    "right": "0",
                    "tag": "h2"
                },
                "id": "1c273418-b80e-4194-9aa0-518f56d5aa69",
                "layerName": "图层4"
            },
            {
                "name": "l-text",
                "props": {
                    "text": "关注本直播\n收获会很多",
                    "fontSize": "13px",
                    "fontFamily": "",
                    "fontWeight": "normal",
                    "fontStyle": "normal",
                    "textDecoration": "none",
                    "lineHeight": "1.3",
                    "textAlign": "center",
                    "color": "#000000",
                    "backgroundColor": "",
                    "actionType": "",
                    "url": "",
                    "height": "33px",
                    "width": "89.5px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "257.5px",
                    "top": "308px",
                    "right": "0",
                    "tag": "p"
                },
                "id": "328fea31-efcd-4379-a34c-e0a0d25ae2cd",
                "layerName": "图层5"
            },
            {
                "name": "l-image",
                "props": {
                    "imageSrc": "http://static.imooc-lego.com/upload-files/%E4%BA%8C%E7%BB%B4%E7%A0%81-663565.png",
                    "actionType": "",
                    "url": "",
                    "height": "47px",
                    "width": "52px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "277.5px",
                    "top": "351px",
                    "right": "0"
                },
                "id": "2492b2cf-29ef-4d1d-8bcd-7480ed7effb5",
                "layerName": "图层6"
            },
            {
                "name": "l-image",
                "props": {
                    "imageSrc": "http://static.imooc-lego.com/upload-files/%E5%A4%B4%E5%83%8F1-508783.png",
                    "actionType": "",
                    "url": "",
                    "height": "50px",
                    "width": "50px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "50.5px",
                    "top": "487px",
                    "right": "0"
                },
                "id": "543e33ba-6b31-485f-a4dd-34a3f42c5060",
                "layerName": "图层7"
            },
            {
                "name": "l-image",
                "props": {
                    "imageSrc": "http://static.imooc-lego.com/upload-files/%E5%A4%B4%E5%83%8F2-687396.png",
                    "actionType": "",
                    "url": "",
                    "height": "50px",
                    "width": "50px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "160.5px",
                    "top": "489px",
                    "right": "0"
                },
                "id": "21e4ab04-6405-4311-b9ae-fa6bb1cf0bb4",
                "layerName": "图层8"
            },
            {
                "name": "l-image",
                "props": {
                    "imageSrc": "http://static.imooc-lego.com/upload-files/%E5%A4%B4%E5%83%8F3-647737.png",
                    "actionType": "",
                    "url": "",
                    "height": "50px",
                    "width": "50px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "271px",
                    "top": "489px",
                    "right": "0"
                },
                "id": "2ced14a5-e258-4aa4-b432-743697f3b6d6",
                "layerName": "图层9"
            },
            {
                "name": "l-text",
                "props": {
                    "text": "Sam",
                    "fontSize": "17px",
                    "fontFamily": "",
                    "fontWeight": "bold",
                    "fontStyle": "normal",
                    "textDecoration": "none",
                    "lineHeight": "1",
                    "textAlign": "center",
                    "color": "#000000",
                    "backgroundColor": "",
                    "actionType": "",
                    "url": "",
                    "height": "36px",
                    "width": "125px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "121px",
                    "top": "543px",
                    "right": "0",
                    "tag": "h2"
                },
                "id": "f199e1d1-e421-40e0-b57c-6167f3cc3c01",
                "layerName": "图层10"
            },
            {
                "name": "l-text",
                "props": {
                    "text": "双越",
                    "fontSize": "17px",
                    "fontFamily": "",
                    "fontWeight": "bold",
                    "fontStyle": "normal",
                    "textDecoration": "none",
                    "lineHeight": "1",
                    "textAlign": "center",
                    "color": "#000000",
                    "backgroundColor": "",
                    "actionType": "",
                    "url": "",
                    "height": "36px",
                    "width": "125px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "12px",
                    "top": "543px",
                    "right": "0",
                    "tag": "h2"
                },
                "id": "2313d1fb-fecf-4891-87b2-f6c6735aabfd",
                "layerName": "图层10副本"
            },
            {
                "name": "l-text",
                "props": {
                    "text": "张轩",
                    "fontSize": "17px",
                    "fontFamily": "",
                    "fontWeight": "bold",
                    "fontStyle": "normal",
                    "textDecoration": "none",
                    "lineHeight": "1",
                    "textAlign": "center",
                    "color": "#000000",
                    "backgroundColor": "",
                    "actionType": "",
                    "url": "",
                    "height": "36px",
                    "width": "125px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "233px",
                    "top": "546px",
                    "right": "0",
                    "tag": "h2"
                },
                "id": "244049bb-8861-4996-b71f-476eb4295dfc",
                "layerName": "图层10副本"
            },
            {
                "name": "l-text",
                "props": {
                    "text": "骨灰级架构专家",
                    "fontSize": "12px",
                    "fontFamily": "",
                    "fontWeight": "normal",
                    "fontStyle": "normal",
                    "textDecoration": "none",
                    "lineHeight": "1",
                    "textAlign": "center",
                    "color": "#000000",
                    "backgroundColor": "",
                    "actionType": "",
                    "url": "",
                    "height": "36px",
                    "width": "92.5px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "253px",
                    "top": "572px",
                    "right": "0",
                    "tag": "p"
                },
                "id": "53b15856-f220-4131-aa63-78bf0f9cc46d",
                "layerName": "图层13"
            },
            {
                "name": "l-text",
                "props": {
                    "text": "资深架构师PMP",
                    "fontSize": "12px",
                    "fontFamily": "",
                    "fontWeight": "normal",
                    "fontStyle": "normal",
                    "textDecoration": "none",
                    "lineHeight": "1",
                    "textAlign": "center",
                    "color": "#000000",
                    "backgroundColor": "",
                    "actionType": "",
                    "url": "",
                    "height": "36px",
                    "width": "92.5px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "27.5px",
                    "top": "571px",
                    "right": "0",
                    "tag": "p"
                },
                "id": "2d6441fd-3abb-488f-aeb7-d559b7e9973c",
                "layerName": "图层13副本"
            },
            {
                "name": "l-text",
                "props": {
                    "text": "BAT大型架构师",
                    "fontSize": "12px",
                    "fontFamily": "",
                    "fontWeight": "normal",
                    "fontStyle": "normal",
                    "textDecoration": "none",
                    "lineHeight": "1",
                    "textAlign": "center",
                    "color": "#000000",
                    "backgroundColor": "",
                    "actionType": "",
                    "url": "",
                    "height": "36px",
                    "width": "92.5px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "138.5px",
                    "top": "571px",
                    "right": "0",
                    "tag": "p"
                },
                "id": "3580f864-bc30-491e-94c0-02cfa5d96064",
                "layerName": "图层13副本"
            },
            {
                "name": "l-image",
                "props": {
                    "imageSrc": "http://static.imooc-lego.com/upload-files/LOGO-517038.png",
                    "actionType": "",
                    "url": "",
                    "height": "25px",
                    "width": "100px",
                    "paddingLeft": "0",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "13px",
                    "top": "19px",
                    "right": "0"
                },
                "id": "a407a673-00cb-4ffb-b04b-d41b1eeaccce",
                "layerName": "图层16"
            },
            {
                "name": "l-image",
                "props": {
                    "imageSrc": "http://static.imooc-lego.com/upload-files/%E7%9F%A9%E5%BD%A2-117418.png",
                    "actionType": "",
                    "url": "",
                    "height": "",
                    "width": "300px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "none",
                    "borderColor": "#000",
                    "borderWidth": "0",
                    "borderRadius": "0",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "36px",
                    "top": "137px",
                    "right": "0"
                },
                "id": "b35d5ff0-5e09-4dfd-a6c8-77dd57f7eb09",
                "layerName": "图层17"
            },
            {
                "name": "l-shape",
                "props": {
                    "backgroundColor": "#1890ff",
                    "actionType": "",
                    "url": "",
                    "height": "6px",
                    "width": "6px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "solid",
                    "borderColor": "#1890ff",
                    "borderWidth": "1px",
                    "borderRadius": "27px",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "34px",
                    "top": "351px",
                    "right": "0"
                },
                "id": "362f490f-a7aa-4c12-bb52-97edc6445452",
                "layerName": "图层18"
            },
            {
                "name": "l-shape",
                "props": {
                    "backgroundColor": "#1890ff",
                    "actionType": "",
                    "url": "",
                    "height": "6px",
                    "width": "6px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "solid",
                    "borderColor": "#1890ff",
                    "borderWidth": "1px",
                    "borderRadius": "27px",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "34px",
                    "top": "275px",
                    "right": "0"
                },
                "id": "4ab79f5e-6f31-4e5c-bfc0-a3b100286193",
                "layerName": "图层18副本"
            },
            {
                "name": "l-shape",
                "props": {
                    "backgroundColor": "#1890ff",
                    "actionType": "",
                    "url": "",
                    "height": "6px",
                    "width": "6px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "solid",
                    "borderColor": "#1890ff",
                    "borderWidth": "1px",
                    "borderRadius": "27px",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "34px",
                    "top": "301px",
                    "right": "0"
                },
                "id": "408942ee-b2c4-4659-911a-6dcd5ea19f67",
                "layerName": "图层18副本"
            },
            {
                "name": "l-shape",
                "props": {
                    "backgroundColor": "#1890ff",
                    "actionType": "",
                    "url": "",
                    "height": "6px",
                    "width": "6px",
                    "paddingLeft": "0px",
                    "paddingRight": "0px",
                    "paddingTop": "0px",
                    "paddingBottom": "0px",
                    "borderStyle": "solid",
                    "borderColor": "#1890ff",
                    "borderWidth": "1px",
                    "borderRadius": "27px",
                    "boxShadow": "0 0 0 #000000",
                    "opacity": 1,
                    "position": "absolute",
                    "left": "34px",
                    "top": "327px",
                    "right": "0"
                },
                "id": "903a3698-63d2-4027-95c9-d2ffc320ab35",
                "layerName": "图层18副本"
            }
        ],
        "__v": 0,
        "props": {
            "backgroundColor": "#ffffff",
            "backgroundImage": "url('http://static.imooc-lego.com/upload-files/%E6%B5%B7%E6%8A%A5%E8%83%8C%E6%99%AF%402x-761456.png')",
            "backgroundRepeat": "no-repeat",
            "backgroundSize": "cover",
            "height": "667.2597864768684px"
        }
    },
    "channels": [],
    "__v": 0
})

const qrcodeUrl = computed(() => {
    const host = 'https://h5.imooc-lego.com/'
    return `${host}p/${templateData.value.id}-${templateData.value.uuid}`
})

const goEditorBtnLoading = ref(false)
const goEditor = async () => {
    goEditorBtnLoading.value = true
    setTimeout(() => {
        router.push('/editor/5147')
        goEditorBtnLoading.value = false
    }, 2000)
}
</script>

<template>
    <a-layout>
        <Header></Header>
        <a-layout-content>
            <div class="wrapper">
                <div class="left">
                    <img :src="templateData.coverImg" alt="">
                </div>
                <div class="right">
                    <div class="title">{{ templateData.title }}</div>
                    <div class="desc">{{ templateData.desc }}</div>
                    <div class="author-line">
                        <i class="iconfont icon-user"></i>
                        该模板由{{ templateData.author }}创作
                    </div>
                    <div class="qrcode">
                        <div class="text">扫一扫，手机预览</div>
                        <QRcode :value="qrcodeUrl"></QRcode>
                    </div>
                    <div class="btn-line">
                        <a-button type="primary" shape="round" @click="goEditor"
                            :loading="goEditorBtnLoading">使用模板</a-button>
                        <a-button shape="round">下载图片海报</a-button>
                    </div>
                </div>
            </div>
        </a-layout-content>
        <Footer></Footer>
    </a-layout>
</template>

<style scoped lang='scss'>
@import '@/assets/styles/mixin.scss';

.wrapper {
    display: flex;
    justify-content: center;
    margin: 80px auto 100px auto;
    @include boxWidth();

    .left {
        width: 33%;
        padding-right: 20px;
        box-sizing: border-box;

        img {
            width: 100%;
        }
    }

    .right {
        width: 33%;

        .title {
            font-weight: 600;
            font-size: 18px;
        }

        .desc {
            margin-top: 10px;
            color: #666;
        }

        .author-line {
            margin-top: 10px;

            .iconfont {
                background: #ccc;
                padding: 6px;
                border-radius: 50%;
                color: #fff;
            }
        }

        .qrcode {
            margin-top: 30px;

            .text {
                color: #666;
                font-size: 12px;
            }
        }

        .btn-line {
            margin-top: 20px;

            .ant-btn {
                margin-right: 20px;
            }
        }

    }
}
</style>